<template>
  <div>
    <div class="bg">
      <div class="title">归档</div>
    </div>
    <div class="main">
      <el-card>
        <div class="timeline">
          <div class="item">目前总共有{{total}}篇文章</div>
          <router-link class="item" :to="'/article/'+item._id" v-for="(item,i) in list" :key="i">
            <span>{{dateFormat(item.publishDate, 'yyyy-mm-dd HH:MM:ss')}}</span> 《{{ item.title }}》
          </router-link>
        </div>
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="10"
          @current-change="handleCurrentChange"
          background
        >
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
import dateFormat from "dateformat";
import { getArticle } from "@/api";
export default {
  data() {
    return {
      total: 0,
      page: 1,
      list: [],
    };
  },
  methods: {
    async getData() {
      let data = await getArticle(this.page)
      this.list = data.list;
      this.total = data.total;
    },
    handleCurrentChange(newsize) {
      this.page = newsize;
      this.getData();
    },
    dateFormat,
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/css/base.scss";
.bg {
  @include bg("/image/wallhaven-9628k.jpg");
  .title {
    font-size: 40px;
    font-weight: 900;
  }
}
.main {
  min-height: calc(40vh - 50px);
  max-width: 980px;
  margin: 30px auto 0;
  .el-card {
    padding: 20px;
    .timeline {
      border-left: 2px solid #dbdde0;
      a {
        display: block;
        color: #303133;
      }
      .item {
        margin-left: 24px;
        padding: 20px 0;
        position: relative;
        //transition:all 0.5s;
        &:nth-child(n + 2) {
          border-bottom: 1px dashed #eee;
        }
        &:first-child {
          padding-top: 0;
          &::after {
            top: 0;
            left: -34px;
            width: 18px;
            height: 18px;
          }
        }
        &::after {
          position: absolute;
          left: -30px;
          top: calc(50% - 6px);
          content: "";
          display: block;
          border-radius: 50%;
          width: 12px;
          height: 12px;
          background-color: #dbdde0;
        }
        span {
          font-size: 12px;
          margin-right: 16px;
        }
        &:nth-child(n+2):hover{
            color: #1abc9c;
            &::after{
                background-color: #1abc9c;
            }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .main {
    .el-card {
      padding: 0;
    }
  }
}
</style>